<template>
	<view class="__custom_header" :style="{backgroundColor, color,}">
		<view class="__status_bar"></view>
		<view class="__header _grid_style" 
			v-if='!isCustomHeader'>
			<view class="__header_left" 
				:class="{'__custom_header_home_wrapper' : showHome}" 
				@click="PD.UniHelp.navBack()">
				<slot name="left">
					<view class="__custom_header_home" v-if='showHome' @tap.stop="PD.UniHelp.reLaunch(APP_ROUTES.index)">
						<text class="iconfont">&#xe6ed;</text>
					</view>
					<text class="iconfont" v-if='showNavBack'>&#xe681;</text>
				</slot>
			</view>
			<view class="__header_mid">
				<slot name="mid">
					<template v-if='title'>{{ title }}</template>
				</slot>
			</view>
			<view class="__header_right"></view>
		</view>
		<view class="__full_custom_header" v-else>
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { APP_ROUTES } from '../enum/app-routes';
import PD from '../libs';
import { useCustomHeader } from '@/pd-libs/hooks/useDisplay';
const { statusBarHeightPx, navHeightPx } = useCustomHeader();
const currentPageRoute = PD.UniHelp.getCurrentPageIns()?.route as APP_ROUTES;
const showHome = getCurrentPages().length === 1 && currentPageRoute !== APP_ROUTES.index && !PD.PdHelp.isPageInTab();
const showNavBack = getCurrentPages().length !== 1 && !PD.PdHelp.isPageInTab();

defineProps({
	title: {//标题
		type: String,
		default: () => {
			return PD.PdHelp.getPageStyleInJson(PD.UniHelp.getCurrentPageIns()?.route as APP_ROUTES)?.navigationBarTitleText;
		}
	},
	backgroundColor : { //背景颜色
		type : String,
		default : '#fff'
	},
	color : {//文字颜色
		type : String,
		default : '#000'
	},
	isCustomHeader : {//是否整个导航栏都自定义
		type : Boolean,
		default : false
	}
});
</script>

<style lang="less" scoped>
.__custom_header {
	--nav-font-size: 34rpx;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 11;
	// background-color: v-bind(backgroundColor);
	color: v-bind(color);
	.__status_bar {
		height: v-bind(statusBarHeightPx);
	}
	.__custom_header_home_wrapper {
		display: flex;
		align-items: center;
	}
	.__custom_header_home {
		--width : 30px;
		width: var(--width);
		height: var(--width);
		text-align: center;
		line-height: var(--width);
		border-radius: 50%;
		background: #ccc;
	}
	.__header {
		height: v-bind(navHeightPx);
		line-height: v-bind(navHeightPx);
		&_left {
			padding-left: 10px;
			.iconfont {
				font-size: 48rpx;
				color: #666;
			}
		}
		&_mid {
			text-align: center;
		}
	}
	.__full_custom_header {
		height: v-bind(navHeightPx);
	}
	._grid_style {
		display: grid;
		font-size: var(--nav-font-size);
		grid-template-columns: repeat(3, 1fr);
	}
}
.__border_bottom {
	// border-bottom: 1px solid #e8e8e8;
}
</style>
